<template>
  <div class="page">
    <global-header title="日志报表" @back="$router.back()">
      <template #right>
        <div class="mr-[10px]">
          <RangeDatePopup v-model:date="searchParams.date" />
        </div>
      </template>
    </global-header>
    <main class="page-main">
      <!-- tab -->
       <div class="bg-white w-full py-[14px]">
        <van-tabs v-model:active="activeType" type="card" @change="handleActiveTypeChange">
          <van-tab title="登录日志"></van-tab>
          <van-tab title="操作日志"></van-tab>
        </van-tabs>
      </div>
      <SearchArea 
      :show-menu="false"
      :show-status="false"
      :show-issue="false"
      :show-ip="true"
        @search="handleSearch"/>
      <LoginLog v-if="activeType === 0" :search-params="searchParams" ref="LoginLogRef"/>
      <UserLog v-if="activeType === 1" :search-params="searchParams" ref="UserLogRef"/>
    </main>
  </div>
</template>
<route>
  {
    name: "admin-report-log",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import SearchArea from './components/search-area.vue';
import LoginLog from './components/log/loginlog.vue';
import UserLog from './components/log/userlog.vue'
import moment from "moment";

const activeType = ref(0)
const LoginLogRef = ref()
const UserLogRef = ref()
interface Params {
  Issue?: string;
  Name?: string;
  Type?: string;
  StartDate?: string;
  EndDate?: string;
  LotteryId?: string|number;
}

const searchParams = reactive({
  Issue:'',
  Name:'',
  Type:'-1',
  LotteryId: -1,
  date: <Date[]>[moment().toDate(), moment().toDate()]
})

provide("searchParams", searchParams);


const handleActiveTypeChange = (val) =>{
  console.log(val,'val')
}

const handleSearch = () => {
  console.log('handlesearch123123')
  if(activeType.value === 0){
    LoginLogRef.value?.handleSearch()
  }else{
    UserLogRef.value?.handleSearch()
  }
  
}
</script>

<style scoped>

</style>
